<template>
  <div class="onlie__search_result" v-show="isShowResult">
    <loading-v2 v-if="isSearching" class="loading" size="small" text="正在搜索理解资料" />
    <div class="list__reuslt" v-else>
      <div class="list_head cursor" @click="handleCollapse">
        <svg-icon icon-class="online-complete" class="fs-16"></svg-icon>
        <span>已阅读{{ organic.length }}个资料</span>
        <svg-icon
          icon-class="right-btn"
          class="fs-16 right__btn ml-a cursor"
          :class="{ show: showCollapse }"
        ></svg-icon>
      </div>
      <el-collapse-transition>
        <div class="search__list_wrapper" v-show="showCollapse" style="height: 200px">
          <div class="search__list">
            <p
              v-for="item in organic"
              :key="item.url"
              class="list__item"
              @click="handleOpenLink(item)"
            >
              <img
                :src="getFaviconFromLink(item.url)"
                @error.once="(e) => (e.target.src = defaultIconUrl)"
                alt=""
                width="16"
                height="16"
              />
              <a href="javascript:void(0);" :title="item.title">{{ item.title }}</a>
            </p>
          </div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
import loadingV2 from '@/components/loading/loading-v2.vue'
import { CollapseTransition } from 'element-ui'
// import { openLink } from '@/utils/client-tools'
import { getFaviconFromLink } from '@/utils'
export default {
  name: '',
  components: {
    loadingV2,
    'el-collapse-transition': CollapseTransition
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      showCollapse: false,
      defaultIconUrl: require('@/assets/oneline-site.svg')
    }
  },
  computed: {
    isShowResult () {
      if (this.item.tool !== 'serper') return false
      if (this.item.status === 'end' && this.organic.length === 0) return false
      return true
    },
    organic () {
      const key = this.item.tool
      const observation = this.item.observation?.[key]
      if (!key) return []
      if (!observation) return []
      let organicItem = null
      try {
        organicItem = JSON.parse(observation)
      } catch (error) {
        organicItem = null
      }
      return organicItem?.organic || []
    },
    isSearching () {
      const key = this.item.tool
      if (!key) return false
      return key && this.organic.length === 0 && this.item.status !== ''
    }

  },
  methods: {
    getFaviconFromLink,
    handleCollapse () {
      this.showCollapse = !this.showCollapse
    },
    handleOpenLink (item) {
      this.$xz('OpenUrl', item.url)
    }
  }
}
</script>

<style lang="scss" scoped>
.onlie__search_result {
  background-color: rgba($color: $color-white, $alpha: 0.1);
  border-radius: 6px;
  padding: 8px 0;
  color: $color-white;
}
.loading {
  color: $color-white;
  justify-content: flex-start;
  padding: 0 16px;
  line-height: 1;
}
.list_head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}
.right__btn {
  transform: rotate(90deg);
  transition: transform 0.3s linear;
  &.show {
    transform: rotate(-90deg);
  }
}
.search__list_wrapper {
  max-height: 200px;
  padding: 0 16px;
  overflow: auto;
}
.search__list {
  padding-top: 2px;
}
.list__item {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  padding: 6px 0;
  &:hover {
    background-color: $button-bg-color;
    border-radius: 2px;
    a {
      text-decoration: underline;
      color: $color-primary;
    }
  }
  a {
    color: $color-white;
    text-decoration: none;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
}
</style>
